Flutter FittedBox

Scales and positions its child within itself according to fit.

简介

按照其官方的介绍，它主要做了两件事情，缩放（Scale）以及位置调整（Position）。

FittedBox 会在自己的尺寸范围内缩放并且调整child位置，使得child适合其尺寸。做过移动端的，可能会联想到ImageView控件，它是将图片在其范围内，按照规则，进行缩放位置调整。FittedBox跟ImageView是有些类似的，可以猜测出，它肯定有一个类似于ScaleType的属性。

布局行为

FittedBox的布局行为还算简单，官方没有给出说明，我在这里简单说一下。由于FittedBox是一个容器，需要让其child在其范围内缩放，因此其布局行为分两种情况：

如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局；
如果没有外部约束条件，则跟child尺寸一致，指定的缩放以及位置属性将不起作用。

继承关系

1	Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > FittedBox

从继承关系可以看出，FittedBox控件是一个基础控件。

示例代码

new Container(
  color: Colors.amberAccent,
  width: 300.0,
  height: 300.0,
  child: new FittedBox(
    fit: BoxFit.contain,
    alignment: Alignment.topLeft,
    child: new Container(
      color: Colors.red,
      child: new Text("FittedBox"),
    ),
  ),
)

写了一个很简单的例子，加入Container是为了加颜色显示两个区域，读者可以试着修改fit以及alignment查看其不同的效果。

源码解析

const FittedBox({
Key key,
this.fit: BoxFit.contain,
this.alignment: Alignment.center,
Widget child,
})

属性解析

fit：缩放的方式，默认的属性是BoxFit.contain，
child在FittedBox范围内，尽可能的大，但是不超出其尺寸。这里注意一点，contain是保持着child宽高比的大前提下，尽可能的填满，一般情况下，宽度或者高度达到最大值时，就会停止缩放。

BoxFit布局表现

alignment：对齐方式，默认的属性是Alignment.center，居中显示child。

源码

构造函数如下：

@override
RenderFittedBox createRenderObject(BuildContext context) {
return new RenderFittedBox(
  fit: fit,
  alignment: alignment,
  textDirection: Directionality.of(context),
);
}

FittedBox具体实现是由RenderFittedBox进行的。不知道读者有没有发现，目前的一些基础控件，继承自RenderObjectWidget的，widget本身都只是存储了一些配置信息，真正的绘制渲染，则是由内部的createRenderObject所调用的RenderObject去实现的。

RenderFittedBox具体的布局代码如下：

if (child != null) {
  child.layout(const BoxConstraints(), parentUsesSize: true);
  // 如果child不为null，则按照child的尺寸比率缩放child的尺寸
  size = constraints.constrainSizeAndAttemptToPreserveAspectRatio(child.size);
  _clearPaintData();
} else {
  // 如果child为null，则按照最小尺寸进行布局
  size = constraints.smallest;
}

场景

FittedBox在目前的项目中还未用到过。对于需要缩放调整位置处理的，一般都是图片。笔者一般都是使用Container中的decoration属性去实现相应的效果。对于其他控件需要缩放以及调整位置的，目前还没有遇到使用场景，大家只需要知道有这么一个控件，可以实现这个功能即可。

Flutter 控件 FittedBox